<template>
  <div style="margin:50px 0 50px">
    <!-- 幻灯片 -->
    <div class="box">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in imgList" :key="index">
          <img class="swipeImg" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品信息 -->
    <div class="box">
      <van-row class="row">
        <van-col class="title" span="20">{{carPrice.title}}</van-col>
        <van-col span="20" class="car_price">
          市场价：
          <s>¥{{carPrice.market_price}}</s>&nbsp; 销售价：
          <span class="newPrice">¥{{carPrice.sell_price}}</span>
        </van-col>
        <van-col class="car_price">
          <van-row>
            <van-col>购买数量：</van-col>
            <van-col>
              <van-stepper v-model="carCont" />
            </van-col>
          </van-row>
        </van-col>
        <van-col class="car_price" span="20">
          <van-button size="small" type="info">立即购买</van-button>
          <van-button size="small" type="danger" @click="addCar">加入购物车</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- 商品参数 -->
    <div class="box">
      <van-row class="row">
        <van-col class="title" span="20">商品参数</van-col>
        <van-col span="20" class="car_parameter" style="padding-top:10px">商品货号：{{carPrice.goods_no}}</van-col>
        <van-col span="20" class="car_parameter">商品库存：{{carPrice.stock_quantity}}件</van-col>
        <van-col
          span="20"
          class="car_parameter"
        >上架时间：{{carPrice.add_time && carPrice.add_time.substring(0,10)}}</van-col>
        <van-col class="title"></van-col>
        <van-col style="width:100%">
          <van-button type="info" plain @click="goToContent" class="btNcar">图文介绍</van-button>
        </van-col>
        <van-col style="width:100%">
          <van-button type="danger" plain class="btNcar" @click="gotoComment">商品评论</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carCont: "",
      imgList: [],
      carPrice: {},
      session: [],
      id: ""
    };
  },
  created() {
    this.id = this.$route.query.goodsId;
    this.getImgList();
    this.getCarPrice();
    this.getSession();
    this.$store.commit("getCarNum");
  },
  methods: {
    async getImgList() {
      const { data: res } = await this.$http.get(
        `/api/getthumimages/${this.id}`
      );
      this.imgList = res.message;
    },
    async getCarPrice() {
      const { data: res } = await this.$http.get(
        `/api/goods/getinfo/${this.id}`
      );
      this.carPrice = res.message[0];
    },
    addCar() {
      let car = {
        id: this.carPrice.id,
        count: this.carCont,
        price: this.carPrice.sell_price,
        selected: true
      };
      if (this.session.length > 0) {
        let index = this.session.findIndex(item => {
          return item.id == car.id;
        });
        if (index == -1) {
          this.session.push(car);
        } else {
          this.session[index].count += car.count;
        }
        this.setsession(this.session);
        this.$store.commit("getCarNum");
      } else {
        this.session.push(car);
        this.setsession(this.session);
        this.$store.commit("getCarNum");
      }
    },
    getSession() {
      this.session = window.sessionStorage.getItem("car")
        ? JSON.parse(window.sessionStorage.getItem("car"))
        : [];
    },
    setsession(obj) {
      window.sessionStorage.setItem("car", JSON.stringify(obj));
    },
    goToContent() {
      this.$router.push(`/goodscontent/${this.id}`);
    },
    gotoComment() {
      this.$router.push(`comment?id=${this.id}`);
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  padding: 10px;
  border-radius: 5px;
  line-height: 30px;
}
.van-swipe {
  border-radius: 5px;
  border: 1px solid #c0c0c0;
  height: 300px;
}
.row {
  border-radius: 5px;
  border: 1px solid #c0c0c0;
  padding: 20px;
}
.title {
  width: 100%;
  border-bottom: 1px solid #c0c0c0;
}
.car_price {
  padding: 10px 10px 0px 10px;
  color: #8f8f94;
  font-size: 14px;
}
.car_parameter {
  padding: 0px 10px 0px 20px;
  color: #8f8f94;
  font-size: 14px;
}
.newPrice {
  color: red;
  font-weight: bold;
}
.row .car_parameter:last-child {
  border-bottom: 1px solid #c0c0c0;
}
.btNcar {
  width: 100%;
}
.swipeImg {
  width: 300px;

  display: block;
  margin: 0 auto;
}
</style>